<template>
	<view class="">
		<view class="m-2 p-3 bg-white clazz rounded-20 d-flex j-sb" @click="refund">
			<view class="">退换货原因</view>
			<view class="text-999">请选择<u-icon class="ml-1" name="arrow-right" color="#999999" size="30"></u-icon></view>
		</view>
		<view class="m-2 px-3 py-2 rounded-20 bg-white beizhu">
			<textarea v-model="reason" placeholder="添加原因描述"  @input="reason_change" maxlength="139"></textarea>
			<view class=" text-right text-999">{{reason_lenght}}/140</view>
		</view>
		<view class="m-2 px-3 py-2 rounded-20 bg-white beizhu">
			<textarea v-model="comment" placeholder="添加操作备注"  @input="comment_change" maxlength="139"></textarea>
			<view class=" text-right text-999">{{comment_lenght}}/140</view>
		</view>
		<view class="footer"></view>
		<view class="bg-white py-2 w-100 position-fixed bottom-0 btn">
			<button type="warn" @click="confirm_payment">提交</button>
		</view>
		
		<!-- 退换货原因 -->
		<s-popup custom-class="demo-popup" position="bottom" v-model="refund_show">
			<view class="d-flex j-center a-center">
				<view class="content span-19 rounded-20 mx-2 px-3">
					<view class="py-3 border-bottom text-center" @click="">主要原因</view>
					<view class="py-3 text-center" @click="">七天无理由退货</view>
				</view>
			</view>
			<view class="d-flex j-center a-center span-19 py-3 bg-white mx-2 my-2 rounded-25 " @click="cancelMore">
				取消
			</view>
		</s-popup>
	</view>
</template>

<script>
	import sPopup from '@/components/s-popup/index.vue';
	export default{
		components:{
			sPopup // 弹框
		},
		data(){
			return {
				refund_show:false,
				reason:"", // 原因描述
				reason_lenght:0, // 原因长度
				comment:"", // 操作备注
				comment_lenght:0, // 备注长度
			}
		},
		methods:{
			// 退换货原因
			refund(){
				this.refund_show=true
			},
			// 原因描述
			reason_change(e){
				this.reason=e.detail.value
				this.reason_lenght=e.detail.cursor
			},
			// 操作备注
			comment_change(e){
				this.comment=e.detail.value
				this.comment_lenght=e.detail.cursor
			}
		},
		onLoad() {
			
		}
	}
</script>

<style>
	textarea{
		height: 200upx;
	}
	.s-popup-mask{
		background: rgba(0,0,0,0.2)!important;
	}
	.content{
		background-color:rgba(255,255,255,0.96)!important;
		color: #666666;
	}
	.s-popup-wrap{
		background: rgba(204,204,204,0)!important;
	}
	.icon_share view{
		color: #888;
	}
</style>
